const baseUrl = 'http://api-breakingnews-web.itheima.net'
let token = localStorage.getItem('token')
// 添加类型的 - 弹出层上的 表单标签
const add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form"  >
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-filter="formDemo" lay-submit>确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;
//lay-filter="formDemo"

// 9. 事件委托 - 编辑按钮 - 点击事件
var edit_str = `
  <form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;
//1.渲染视图
function loader(params) {

  //1.1发送请求
  axios.get(`${baseUrl}/my/article/cates`, {
    headers: {
      Authorization: token
    }
  }).then((res) => {
    //0清空容器
    $('tbody').empty()
    const { data } = res.data
    //1.2遍历数组,动态创建html标签
    data.forEach(obj => {
      const thTr = ` <tr>
      <td>${obj.name}</td>
      <td>${obj.alias}</td>
      <td>
        <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
  
        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`
      //1.3追加到对应的容器中
      $('tbody').append(thTr)
    });
  })
}
loader()
//1.3表单验证
const form = layui.form;
form.verify({
  ctname: [
    /^[\u4E00-\u9FA5]+$/,
    "分类名只能是中文"
  ],
  aliname: [
    /^[a-z0-9]+$/,
    "小写英文和数字组成"
  ]
})
// 2.添加按钮注册点击事件
$('.add').on('click', () => {
  //1.2弹窗
  const index = layer.open({
    type: 1,
    title: ['新增类别', 'font-size:18px;'],
    content: add_str,//这里content是一个普通的String
    area: ['500px', '300px'],
    success: function () {
      //1.4搜集表单数据
      //给确认按钮注册点击事件
      $('.add-form').on('submit', (e) => { 
        // $('.sure').on('click', (e) => { 
          console.log('123');
        e.preventDefault()
        //获取表单区域所有值
        var data1 = $('.add-form').serialize()
        console.log(data1);
        //1.5发送请求
        axios.post(`${baseUrl}/my/article/addcates`, data1, {
          headers: {
            Authorization: token
          }
        }).then(res => {
          const { data } = res
          if (data.status === 0) {
            //提示
            layer.msg(data.message)
            //关闭弹窗
            setTimeout(() => {
              layer.close(index)
            }, 500);
            //渲染视图
            loader()
          }
        })

      })
    }
  });
})
//3.修改
$('tbody').on('click', '.edit', function () {
  const name = $(this).attr('data-name')
  const alias = $(this).attr('data-alias')
  const Id = $(this).attr('myid')
  //弹窗
  //1.2弹窗
  const index = layer.open({
    type: 1,
    title: ['修改类别', 'font-size:18px;'],
    content: edit_str,//这里content是一个普通的String
    area: ['500px', '300px'],
    success() {
      //表单赋值
      form.val("edit", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
        name,
        alias,
        Id
      });
      //注册确认修改点击事件
      $('.edit-form').on('submit', function (e) {
        e.preventDefault()
        //获取修改后的表单数据
       const data = $('.edit-form').serialize()
       //发送请求
       axios.post(`${baseUrl}/my/article/updatecate`,data,{
         headers:{
          Authorization:token
         }
       }).then((res)=>{
         if(res.data.status === 0){
          layer.msg(res.data.message)
        //关闭弹窗
        setTimeout(() => {
          layer.close(index)
        }, 500);
        //渲染视图
        loader()  
      }})
       
      })
    }
  });
})

//4.删除
$('tbody').on('click', '.delete',  (e) =>{
 layer.confirm('确定要删除吗?', {icon: 3, title:'温馨提示'}, function(index){
    //do something
    
    //获取id
    const Id =e.target.getAttribute('myid')
    console.log(Id);
   //发送请求
   axios.get(`${baseUrl}/my/article/deletecate/${Id}`,{
     headers:{
      Authorization:token
     }
   }).then((res)=>{
     //提示
     if (res.data.status === 0) {
       loader()
       layer.msg(res.data.message)
    }
   })
    layer.close(index);
  });
})




